<template>
    <van-dropdown-menu>
        <template v-for="(item, index) in itemData" :key="item.gType">
            <!-- 分类下拉项 -->
            <van-dropdown-item v-if="item.gType === 2" title="位置" :ref="dropdownItemRefs">
                <div class="dropdown-bar-panel-content">
                    <side-bar class="top" :menu-data="item?.subGroups" />
                    <view-house-btns class="bottom" @clear="handleClearClick('位置')"
                        @view-click="handleViewClick('位置')" />
                </div>
            </van-dropdown-item>

            <!-- 排序下拉项 -->
            <van-dropdown-item v-if="item.gType === 4" v-model="value1" :options="dropdownOptions" />

            <!-- 筛选 -->
            <van-dropdown-item v-if="item.gType === 1" title="筛选" :ref="dropdownItemRefs">
                <div class="dropdown-bar-panel-content">
                    <side-bar :menu-data="item?.subGroups">
                        <template #content="slotProps">
                            <p class="list-content">正在开发中....</p>
                        </template>
                    </side-bar>
                    <view-house-btns class="bottom" @clear="handleClearClick('筛选')"
                        @view-click="handleViewClick('筛选')" />
                </div>
            </van-dropdown-item>
        </template>
    </van-dropdown-menu>
</template>


<script setup>
import sideBar from '../side-bar/side-bar.vue';
import viewHouseBtns from '../view-house-btns/view-house-btns.vue';
import { ref } from 'vue';

const dropdownValue = ref('')
const sideBarActive = ref(0)
const value1 = ref(0);
const dropdownRefs = {};

const props = defineProps({
    itemData: {
        type: Array,
        default: () => []
    }
})

const dropdownOptions = [
    { text: "欢迎度排序", value: 0 },
    { text: "好评优先", value: 1 },
    { text: "点评数多->少", value: 2 },
    { text: "低价优先", value: 3 },
    { text: "高价优先", value: 4 },
];

// 处理侧边栏菜单点击事件
const dropdownItemRefs = (el) => {
    if (el) {
        dropdownRefs[el.title] = el;
    }
}

// 点击清空事件
const handleClearClick = (title) => {
    const item = props.itemData.find((item) => item.label === title);
    if (item && item.subGroups) { // 添加 item.subGroups 判断
        item.subGroups.forEach((subItem) => {
            subItem.isSelect = false;
        });
    }
    dropdownRefs[title]?.toggle();
};
// 点击查看事件
const handleViewClick = (title) => {
    dropdownRefs[title]?.toggle();
}

</script>


<style lang="less" scoped>
@popupHeight: 500px;

// 重写Vant样式
:global(.van-dropdown-menu .van-popup .van-sidebar-item) {
    padding-left: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
}

:global(.van-dropdown-menu .van-popup .van-sidebar-item::before) {
    border-radius: 50%;
    left: 8px;
}

:global(.van-dropdown-menu .van-dropdown-item__content) {
    overflow-y: hidden;
    max-height: 100%;
}

.dropdown-bar-panel-content {
    position: relative;
    height: @popupHeight;
    overflow: hidden;
    background-color: var(--van-sidebar-background-color);

    .bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
}
</style>